<template>
	<view class="body">
		<div class="head zm-flex1">
			<div class="zm-flex-item qrcode-title zm-text-overflow">二维码名称：小龙</div>
			<van-button
				plain
				hairline
				style="width: 63px; height: 32px"
				type="primary"
				color="#7f8fef"
				@click="router.back()"
			>
				返回
			</van-button>
		</div>
		<view class="list">
			<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getData">
				<view class="item" v-for="item in data.list" :key="item.date">
					<view class="header">
						{{ item.date }}
					</view>
					<div class="h-line"></div>
					<view class="info">
						<view class="infoItem" style="width: 18%">
							<span>关注次数</span>
							<span class="value">{{ item.subscribe_num || 0 }} </span>
						</view>
						<div class="v-line"></div>
						<view class="infoItem" style="width: 21%">
							<span>关注人数 </span>
							<span class="value"> {{ item.dist_subscribe_num || 0 }}</span>
						</view>
						<div class="v-line"></div>
						<view class="infoItem" style="width: 18%">
							<span>取关次数</span>
							<span class="value">{{ item.unsubscribe_num || 0 }} </span>
						</view>
						<div class="v-line"></div>
						<view class="infoItem" style="width: 21%">
							<span>取关人数 </span>
							<span class="value">{{ item.dist_unsubscribe_num || 0 }} </span>
						</view>
						<div class="v-line"></div>
						<view class="infoItem" style="flex: 1.5">
							<span>净关人数 </span>
							<span class="value"> {{ item.plus_num || 0 }}</span>
						</view>
					</view>
				</view>
			</van-list>
		</view>
	</view>
</template>
<script setup>
	import { ref } from 'vue'
	import { Tooltip } from '@arco-design/web-vue'
	import { IconQuestionCircle } from '@arco-design/web-vue/es/icon'
	import { useRouter } from 'vue-router'
	document.title = '渠道二维码统计'
	const data = ref({
		list: [],
		name: '小龙',
		total: 18
	})
	const router = useRouter()

	const loading = ref(false)
	const finished = ref(true)

	const getData = async () => {
		const res = await $globalRequest('/api/QD2selectlistnew', {}, { method: 'post' })
		data.value.list = res || []
	}
	getData()
</script>
<style scoped lang="less">
	.body {
		width: 100vw;
		height: 100vh;
		overflow: auto;
		display: block;
		background-color: rgba(242, 244, 245, 1);
		padding-bottom: 20px;
		font-size: 1rem;
		.head {
			width: 100vw;
			box-sizing: border-box;
			padding: 17px 17px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.qrcode-title {
				color: #333;
				font-size: 16px;
			}
		}
		.list {
			display: block;
			height: calc(100vh - 51px);
			overflow: scroll;
		}
		.item {
			margin-top: 20px;
			color: #6e6e6e;
			padding: 17px;
			border-top: 1px solid #dadada;
			border-bottom: 1px solid #dadada;
			font-size: 14px;
			background-color: #fff;
			display: block;
			.h-line {
				margin: 10px 0 20px;
				height: 1px;
				background-color: rgba(218, 218, 218, 1);
			}
			.v-line {
				height: 40px;
				background-color: #dadada;
				background-color: rgba(218, 218, 218, 1);
				width: 1px;
			}

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.infoItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					line-height: 1.5;
					font-size: 12px;
					.value {
						color: rgba(127, 143, 239, 1);
					}
				}
			}
		}
	}
</style>
